<template>
  <div id="app">
    <!-- 左边列表 -->
    <Left :tabs="tabs" :currentIndex="currentIndex" @deliverIndex="changelist"></Left>
    <!-- 右边列表 -->
    <Right :tabs="tabs" :currentIndex="currentIndex"></Right>
  </div>
</template>

<script>
import Left from './components/Left.vue'
import Right from './components/Right.vue'
export default {
    data(){
        return{
            currentIndex:0,
           tabs:[
            {
                tabName:"三文鱼",
                xcArr:[
                {pic:"https://ts1.cn.mm.bing.net/th/id/R-C.41200bd8d53093312a794a0150d4462a?rik=d5xN%2bgoPZvIICQ&riu=http%3a%2f%2fwww.kwthink.cn%2fwp-content%2fuploads%2f2020%2f06%2f4-2-1.jpg&ehk=TtBJnzC5PgaxmzF1kY7qg37xW2l9RYYk6Of4YKFFyQ0%3d&risl=&pid=ImgRaw&r=0",title:"挪威三文鱼刺身-薄片",ms:"取用于三文鱼中段,口感鲜嫩，富含维生素",price:45},
                {pic:"https://ts1.cn.mm.bing.net/th/id/R-C.41200bd8d53093312a794a0150d4462a?rik=d5xN%2bgoPZvIICQ&riu=http%3a%2f%2fwww.kwthink.cn%2fwp-content%2fuploads%2f2020%2f06%2f4-2-1.jpg&ehk=TtBJnzC5PgaxmzF1kY7qg37xW2l9RYYk6Of4YKFFyQ0%3d&risl=&pid=ImgRaw&r=0",title:"挪威三文鱼刺身-薄片",ms:"取用于三文鱼中段,口感鲜嫩，富含维生素",price:45},
                {pic:"https://ts1.cn.mm.bing.net/th/id/R-C.41200bd8d53093312a794a0150d4462a?rik=d5xN%2bgoPZvIICQ&riu=http%3a%2f%2fwww.kwthink.cn%2fwp-content%2fuploads%2f2020%2f06%2f4-2-1.jpg&ehk=TtBJnzC5PgaxmzF1kY7qg37xW2l9RYYk6Of4YKFFyQ0%3d&risl=&pid=ImgRaw&r=0",title:"挪威三文鱼刺身-薄片",ms:"取用于三文鱼中段,口感鲜嫩，富含维生素",price:45}
            ]
            },
            {
                tabName:"刺身",
                xcArr:[
                {pic:"https://img.zcool.cn/community/0127055ff67ab711013ee04d892aa9.jpg@3000w_1l_0o_100sh.jpg",title:"刺身+辣根",ms:"取用于三文鱼中段,口感鲜嫩，富含维生素",price:45},
                {pic:"https://img.zcool.cn/community/0127055ff67ab711013ee04d892aa9.jpg@3000w_1l_0o_100sh.jpg",title:"刺身+辣根",ms:"取用于三文鱼中段,口感鲜嫩，富含维生素",price:45},
                {pic:"https://img.zcool.cn/community/0127055ff67ab711013ee04d892aa9.jpg@3000w_1l_0o_100sh.jpg",title:"刺身+辣根",ms:"取用于三文鱼中段,口感鲜嫩，富含维生素",price:45}
            ]
            },
            {
                tabName:"大虾",
                xcArr:[
                {pic:"https://ts1.cn.mm.bing.net/th/id/R-C.e10660e8e341dc7610d4377df96fbe1e?rik=Kn2i%2bcvpeSp%2b1Q&riu=http%3a%2f%2fcp1.douguo.com%2fupload%2fcaiku%2f6%2fd%2f0%2fyuan_6dd80b66e2e694247e7d080a1cf30200.jpg&ehk=kHh5aWFQRSrE2pLNuTxxrA0aY%2bRLGB7B%2bKKA8Ar5lOc%3d&risl=&pid=ImgRaw&r=0",title:"皮皮虾我们走",ms:"取用于三文鱼中段,口感鲜嫩，富含维生素",price:45},
                {pic:"https://ts1.cn.mm.bing.net/th/id/R-C.e10660e8e341dc7610d4377df96fbe1e?rik=Kn2i%2bcvpeSp%2b1Q&riu=http%3a%2f%2fcp1.douguo.com%2fupload%2fcaiku%2f6%2fd%2f0%2fyuan_6dd80b66e2e694247e7d080a1cf30200.jpg&ehk=kHh5aWFQRSrE2pLNuTxxrA0aY%2bRLGB7B%2bKKA8Ar5lOc%3d&risl=&pid=ImgRaw&r=0",title:"皮皮虾我们走",ms:"取用于三文鱼中段,口感鲜嫩，富含维生素",price:45},
                {pic:"https://ts1.cn.mm.bing.net/th/id/R-C.e10660e8e341dc7610d4377df96fbe1e?rik=Kn2i%2bcvpeSp%2b1Q&riu=http%3a%2f%2fcp1.douguo.com%2fupload%2fcaiku%2f6%2fd%2f0%2fyuan_6dd80b66e2e694247e7d080a1cf30200.jpg&ehk=kHh5aWFQRSrE2pLNuTxxrA0aY%2bRLGB7B%2bKKA8Ar5lOc%3d&risl=&pid=ImgRaw&r=0",title:"皮皮虾我们走",ms:"取用于三文鱼中段,口感鲜嫩，富含维生素",price:45}
            ]
            }
           ]
        }
    },
    components:{
    Left,
    Right
  },
  methods:{
    changelist(index){
      this.currentIndex = index;
    }
  }
};
</script>

<style lang="scss">
*{
  margin: 0;
  padding: 0;
}
</style>
